import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Table, Button, Tabs } from 'antd'
import {
  fetchLocalList,
  updateLocalListQuery,
  resetLocalListQuery } from 'actions/local'
import Panel from 'components/panel'
import Gform from 'components/gForm'
import TypeList from './localType/typeList'
import './style.css'


const TabPane = Tabs.TabPane;

//连接公用常量、后端返回的数据方法  并放置在props里面调用
@connect(
  (state, props) => ({
    config: state.config,
    localListSearchResult: state.localListSearchResult,
    amList: state.amList,
  })
)

// 声明组件  并对外输出
export default class localList extends Component {
  // 初始化页面常量 绑定事件方法
  constructor(props) {
    super(props)
    this.state = {
      activeTab: 'list',
      list: [
        {
          id: 1,
          name: '厉登高',
          sex: '男',
          age: '89',
          cardId: '330102192810200017',
          address: '杭州市上城区望江街道近江家园五园11幢1203室',
          institutions: '上城分局望江派出所',
          moveInTime: 20070101010101,
          roomNum: 509022109
        },
        {
          id: 2,
          name: '高月英',
          sex: '女',
          age: '50',
          cardId: '330104196710200029',
          address: '杭州市上城区望江街道近江家园五园11幢702室',
          institutions: '上城分局望江派出所',
          moveInTime: 20070101010101,
          roomNum: 509022102
        }
      ]
    }
    this._handleSubmit = this._handleSubmit.bind(this)
    this.cacheSearch = this.cacheSearch.bind(this)
    this._clear = this._clear.bind(this)
  }

  // 组件已经加载到dom中
  componentDidMount() {
    this.props.dispatch(fetchLocalList({currentPage: 1}))
  }

  // 点击搜索按钮的回调事件
  _handleSubmit(query, currentPage) {
    this.props.dispatch(fetchLocalList({...query, currentPage: currentPage}))
  }

  gFormConfig() {
    const { config } = this.props
    return [
      {
        sort: 'division',
        label: '管辖单位',
        items: config.DIVISION
      }
    ]
  }

  gFormSubmit(query) {
    console.log(query)
  }

  // 重置搜索条件
  _clear() {
    this.props.dispatch(resetLocalListQuery())
  }

  // 缓存更新
  cacheSearch(item) {
    this.props.dispatch(updateLocalListQuery(item))
  }

  // 表格展示项的配置
  columns() {
    return [
      {
        title: '序号',
        key: 'index',
        render: (text, recordId, index) => <span>{index + 1}</span>,
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '身份证号码',
        dataIndex: 'cardId',
        key: 'cardId',
      },
      {
        title: '登记地址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '管辖单位',
        dataIndex: 'institutions',
        key: 'institutions',
      },
      {
        title: '户口迁入时间',
        dataIndex: 'moveInTime',
        key: 'moveInTime',
      },
      {
        title: '户号',
        dataIndex: 'roomNum',
        key: 'roomNum',
      },
    ]
  }


  render() {
    const {
      localListSearchResult,
      } = this.props
    // 暂时用假数据来模拟列表项
    return (
      <Panel>
        <Gform gFormConfig={this.gFormConfig()} gFormSubmit={this.gFormSubmit}/>
        <div className="list-tab">
          <TypeList
            columns={this.columns()}
            dataSource={this.state.list}
            // dataSource={houseCheckSearchResult.list}
            currentPage={localListSearchResult.currentPage}
            loading={localListSearchResult.loading}
          />
        </div>
      </Panel>
    )
  }
}
